<template>
  <div>

    <Panel title="优惠券绑定" useBack>
      <div slot="body">
          <div class="title" style="padding: 20px 0">
              {{name}}
          </div>

          <div class="vip-box">
            <div class="vip-item">
              <div class="title tab">未绑定优惠券：</div>
              <div class="sear">
                  <div class="line-title"></div>
              </div>
              <div class="site-mold" style="margin-top: 50px;">
                <TableEncapsulation
                  slot="body"
                  :tableConfig="tableConfig1"
                  :tableData="noBand"
                >
                   <template slot="operation" slot-scope="operation">
                      <el-button
                        v-has="{action: 'level:update', effect: 'move'}"
                        type="text"
                        @click="()=>editStore(operation.row)"
                      >绑定</el-button>
                    </template>
                    <TablePager
                      slot="pager"
                      v-if="pager.use"
                      layout=" prev, pager, next"
                      :size="pager.size"
                      :pageChange="pageChange"
                      :sizeChange="sizeChange"
                      
                      :show-total="pager.showTotal"
                      :total="pager.total"
                      :current="pager.current"
                    >
                      <span class="demonstration">GO></span>
                    </TablePager>
                </TableEncapsulation>
              </div>
            </div>
            <div class="vip-item">
              <div class="title tab">
                  已绑定优惠券：
              </div>
              <div class="site-mold" style="margin-top: 40px;">
                <TableEncapsulation
                  slot="body"
                  :tableConfig="tableConfig"
                  :tableData="bandList"
                >
                   <template slot="operation" slot-scope="operation">
                    <el-button
                        v-has="{action: 'level:update', effect: 'move'}"
                        type="text"
                        @click="()=>editStore1(operation.row)"
                      >编辑</el-button>
                      <el-button
                        v-has="{action: 'level:update', effect: 'move'}"
                        type="text"
                        @click="()=>remove(operation.row.id)"
                      >删除</el-button>
                    </template>
                    <TablePager
                      slot="pager"
                      v-if="pager1.use"
                      layout="prev, pager, next"
                      :size="pager1.size"
                      :pageChange="pageChange1"
                      :show-total="pager1.showTotal"
                      :total="pager1.total"
                      :current="pager1.current"
                    >
                      <span class="demonstration">GO></span>
                    </TablePager>
                </TableEncapsulation>
              </div>
            </div>
            
          </div>
      </div>
    </Panel>
    <!-- 编辑、新增 -->
      <ModalPanel 
        :visible='visible'
        title="编辑"
        :onCancel="onCancel"
        class="bannerDialog"
        :onOk="onSubmit">
        <div>
          <ModifyForm
            :hiddenBtn='true'
            :editColumn='editColumn'
            :updateData="updateData"
            labelWidth='100px'
            ref="configModal"
            class="ModifyForm"
            :temporaryData='modalData'>
          </ModifyForm>
        </div>
      </ModalPanel>
      <!-- end -->
  </div>
</template>
<script>
import Panel from "@/components/Panel";
import ModifyForm from "@/components/ModifyForm";
import ModalPanel from "@/components/ModalPanel";
import FileUpload from '@/components/FileUpload';
import request from "@/tools/request";
import TablePager from "@/components/Pager";
import TableEncapsulation from "@/components/TableEncapsulation";
import { objectFilter } from "@/tools/array";

export default {
  name: 'comboVipBand1',
  components: {
    FileUpload,
    Panel,
    ModalPanel,
    ModifyForm,
    TablePager,
    TableEncapsulation
  },
  data() {
    return {
      eventId: '',
      eventTitle: '',
      bandList: [],
      siteList: [],
      parkSite:[],
      noBand:[],
      id: '',
      site: '',
      siteId:'',
      pileList: [],
      name: '',
      operation: true,
      pager: {
        use: true,
        total: 0,
        current: 1,
        size: 50,
        showTotal: true
      },
      pager1: {
        use: true,
        total: 0,
        current: 1,
        size: 50,
        showTotal: true
      },
      // 编辑新增
      couponId: '',
      visible: false,
      modalData:{},
      editColumn: [
        {
          name: "领取数量",
          prop: "receiveNums",
          type: "number",
          width:24,
          required: true
        },
      ],
      // end
    };
  },
  methods: {
    //获取站点
    async iotSite(){
      let { list } = await request({
      url: "/iot/site/select",
      method: "POST",
      data: {}
      });
      this.siteList = list
      // this.editColumnAdd[1].optionList = list
    },
    //已绑定的
    async fetchData(){
      let res = await request({
        url: `/client/event/coupon/list?eventId=${this.eventId}`,
        method: "GET",
      });
      let data = res.list
      data.map(item =>{
        // item.price= `满${item.thresholdAmount}减${item.amount}`
        return item
      })
      this.bandList = res.list
      // this.pager1.total = res.page.totalCount
      // this.pager1.current = res.page.currPage
    },
    pageChange1(val) {
      this.pager1.current = val;
      this.fetchData();
    },
    //未绑定的
    async getPiles(){
      let page = this.pager.current
      let res = await request({
        url: `/client/coupon/list?state=2&page=${page}&size=20`,
        method: "GET",
      });
      let data = res.page.list
      data.map(item=> {
        item.price= `满${item.thresholdAmount}减${item.amount}`
        return item
      })
      this.noBand = data
       this.pager.total = res.page.totalCount
      this.pager.current = res.page.currPage
    },
    pageChange(val) {
      this.pager.current = val;
      this.getPiles();
    },
    sizeChange(val){
      this.pager.size = val;
      this.getPiles();
    },
    //新增编辑start---
    editStore(rowData){
      this.modalData = { receiveNums: 1,couponId:rowData.id }
      this.visible = true
    },
    editStore1(rowData){
      this.modalData =rowData
      this.visible = true
    },
    async onSubmit(){
      this.$refs['configModal'].onSubmit()
    },
    onCancel(){
      this.visible = false
    },
    async updateData(values) {
     var {  receiveNums  , couponId ,id} = values
     let eventId  =this.eventId 
    //  var couponId = id
     console.log('modalData', {  receiveNums  , couponId ,id})
     let url, msg
      url = id? '/client/event/coupon/update':'/client/event/coupon/add'
        msg = '添加成功'
     
      let res = await request({
        url: url,
        method: "POST",
        data: {id, receiveNums   , couponId , eventId }
      });
      if(res.code !==0 ) return
      this.$message.success(msg)
      this.visible = false
      this.fetchData()
    },
    // 新增编辑end---
    remove(id){
       this.$confirm('确认删除吗', '操作确认', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then( async () => {
        const del = await request({
        url: `/client/event/coupon/delete/${id}`,
        dataType: 'json',
        method: "POST",
        data: [id]
      });
        if(del.code !==0) return
        this.$message.success('删除成功')
        this.fetchData()
      })
    },
  },
  mounted(){
    this.iotSite()
  },
  created() {
    if(this.$route.query.eventId)
      this.eventId = this.$route.query.eventId
      this.eventTitle = this.$route.query.eventTitle
    //   this.fetchData()
      this.fetchData()
      this.getPiles()
    //    this.getSite()
  },
  computed: {
    tableConfig () {
      return {
        selection: true,
        columnConfig: [
          {
            label: "优惠券ID",
            type: "text",
            prop: "couponId",
            align: "center"
          },
          {
            label: "数量",
            type: "text",
            prop: "receiveNums",
            align: "center",
            class: 'number-tag'
          },
          this.operation && {
            type: "operation",
            align: "center",
            label: "操作",
            width:180
          }
        ].filter(Boolean)
        }
    },
    tableConfig1 () {
      return {
        selection: true,
        columnConfig: [
          {
            label: "编号",
            type: "text",
            prop: "id",
            align: "center"
          },
          {
            label: "面额",
            type: "text",
            prop: "price",
            align: "center"
          },
          // {
          //   label: "门槛金额",
          //   type: "text",
          //   prop: "thresholdAmount",
          //   align: "center",
          // },
          {
            label: "类型",
            type: "other",
            prop: "type",
            align: "center",
            fnc: val => val == 1 ? "会员折扣" : val == 2 ? "服务费减免" : "总费用满减 ,"
          },
          this.operation && {
            type: "operation",
            align: "center",
            label: "操作",
            width:180
          }
        ].filter(Boolean)
        }
    }
  },
};
</script>

<style lang='scss' >
.site-mold{
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: wrap;
    margin-bottom: 20px;
}
.site-box{
    padding: 4px 6px;
    background: #dfdfdf;
    border-radius: 2px;
    margin: 5px;
    cursor: pointer;
}
.color {
    background: #089bc0;
    color: #ffffff;
}
.title{
    font-size: 16px;
    font-weight: 700;
    padding: 10px 0;
}
.name-box {
    display: flex;
    align-items: center;
    margin: 4px 0;
}
.circle {
    width: 4px;
    height: 16px;
    border-radius: 2px;
    background: #089bc0;
}
.tab{
  background: #f1e5e0;
  padding-left: 10px;
  width: 179px;
  border-top-right-radius: 20px;
  border-bottom-right-radius: 20px;
  color: #672814;
}
.vip-box{
  display: flex;
  flex-wrap: nowrap;
}
.vip-item{
  width: 49%;
}
.index_tablePager__5svq{
  display: flex;
}
</style>